<template>
  <div class="rfCollapseTree" :style="{'--main-padding': level*10 + 'px'}">
    <el-collapse v-model="activeName" accordion>
      <el-collapse-item :title="item.text" :name="item.id" v-for="(item, index) in data">
        <div v-for="childItem in item[[defaultProps.children]]">
          <div v-if="childItem[defaultProps.children]&& childItem[defaultProps.children].length>0">
            <rfCollapseTree :data="[childItem]" :level="childItem.level"></rfCollapseTree>
          </div>
          <div class="itemContent" v-else><span style="display: inline-block" :style="{width:childItem.level * 10 + 'px'}"></span>{{childItem[defaultProps.label]}}</div>
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
  export default {
    name: 'rfCollapseTree',
    props: {
      data: {
        type: Array,
        default: () => []
      },
      level: {
        type: Number,
        default: 0
      },
      defaultProps: {
        type: Object,
        default: () => {
          return {
            children: 'childNodes',
            label: 'text',
            value: 'id'
          }
        }
      },
    },
    data () {
      return {
        activeName: 0
      }
    }
  }
</script>

<style lang="scss">
  .rfCollapseTree {
    width: 100%;
    .itemContent {
      padding-left: 20px;
      padding: 10px 0;
      border-bottom: 1px solid #eee;
      cursor: pointer;
      &:hover{
        background-color: #eee;
      }
    }
    .el-collapse-item__wrap {
      border-bottom: 0;
    }
    .el-collapse-item__content {
      padding-bottom: 0;
    }

    .el-collapse-item__header {
      padding-left: var(--main-padding);
      border-bottom: 1px solid #eee;
    }
  }
</style>
